<template>
  <div>
    <pre><code ref="codeBlock" class="language-javascript" v-html="highlightedCode"></code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

export default {
  data() {
    return {
      code: `function hello() {
  console.log('Hello, world!');
}`
    }
  },
  computed: {
    highlightedCode() {
      return hljs.highlightAuto(this.code).value
    }
  },
  mounted() {
    this.highlightCode()
  },
  updated() {
    this.highlightCode()
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock
      hljs.highlightBlock(codeBlock)
    }
  }
}
</script>

<style scoped>
pre {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
}
</style>
